<template>
  <div class="sidebar">
    <el-menu
        class="sidebar-el-menu"
        :default-active="onRoutes"
        :collapse="collapse"
        background-color="#00000000"
        text-color="#FFFFFF"
        mode="horizontal"
        active-text-color="#20a0ff"
        router>
      <template v-for="item in items">
        <template v-if="item.subs">
          <el-submenu :index="item.index" :key="item.index">
            <template slot="title">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.title }}</span>
            </template>
            <template v-for="subItem in item.subs">
              <el-submenu
                  v-if="subItem.subs"
                  :index="subItem.index"
                  :key="subItem.index"
              >
                <template slot="title">{{ subItem.title }}</template>
                <el-menu-item
                    v-for="(threeItem,i) in subItem.subs"
                    :key="i"
                    :index="threeItem.index"
                >{{ threeItem.title }}</el-menu-item>
              </el-submenu>
              <el-menu-item
                  v-else
                  :index="subItem.index"
                  :key="subItem.index"
              >{{ subItem.title }}</el-menu-item>
            </template>
          </el-submenu>
        </template>
        <template v-else-if="item.show">
          <el-menu-item :index="item.index" :key="item.index">
            <!--                        <i :class="item.icon"></i>-->
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
import bus from '../common/bus';
import userApi from '@/api/userApi'
export default {
  data() {
    return {
      onRoutes: this.$route.path,
      collapse: false,
      items: [
        {
          icon: 'el-icon-lx-apps',
          index: '/view/dashboard',
          title: '首页',
          ename: 'my',
          show: false
        },
        {
          icon: 'el-icon-lx-apps',
          index: '/view/projectManage',
          title: '项目管理',
          ename: 'project',
          show: false
        },
        {
          icon: 'el-icon-lx-apps',
          index: '/view/orgManage',
          title: '组织管理',
          ename: 'user',
          show: false
        },
      ]
    };
  },
  methods: {
    // getPermission (item) {
    //   let res = this.$store.state.sys.memuLists
    //   console.log(res)
    //   console.log(res)
    //   let a = (res || []).filter(it => {
    //     return item.ename === it.ename
    //   })
    //   return a.length > 0
    // }
  },
  computed: {
    getPermission () {
      return async (item) => {
        let res = this.$stoer.state.sys.memuLists
        console.log(res)
        if (res.length > 0) {
          let a = (res || []).filter(it => {
            return item.ename === it.Ename
          })
          return a.length > 0
        } else {
          let res = await this.$store.dispatch('getEmeu', this.dictTypeCode)
          console.log(res)
          let a = (res || []).filter(it => {
            return item.ename === it.Ename
          })
          return a.length > 0
        }
      }
    }
  },
  created() {
    // 通过 Event Bus 进行组件间通信，来折叠侧边栏
    bus.$on('collapse', msg => {
      this.collapse = msg;
      bus.$emit('collapse-content', msg);
    });
  },
  watch: {
    '$store.state.sys.memuLists': {
      deep: true,
      immediate: true,
      handler (res, o) {
        if (res.length > 0) {
          this.items.forEach(it1 => {
            let a = (res || []).filter(it => {
              return it1.ename === it.Ename
            })
            it1.show = a.length > 0
          })
        } else {
          this.$store.dispatch('getEmeu')
        }
      }
    }
  }
};
</script>

<style scoped lang="scss">
.sidebar-el-menu >>> .el-menu-item:hover {
  background-color: transparent !important;
}
.sidebar-el-menu /deep/.el-menu-item {
  line-height: 50px !important;
  height: 50px !important;
  &:hover {
    background-color: transparent !important;
  }
  &.is-active{
    color: #3fD4D4 !important;
  }
}
.sidebar-el-menu {
  border-bottom: solid 0 #e6e6e6;
}
</style>
